<template>
  <div class="global-header">
    <div class="header-left">
      <div class="page-title">
        <h1>{{ title }}</h1>
        <p v-if="subtitle">{{ subtitle }}</p>
      </div>
      
      <el-breadcrumb separator="/" class="breadcrumb" v-if="showBreadcrumb">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in breadcrumbItems" :key="index" :to="item.path">
          {{ item.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <div class="header-right">
      <slot name="actions"></slot>
      
      <!-- 主题切换 -->
      <el-switch
        v-if="showThemeSwitch"
        v-model="isDark"
        @change="toggleTheme"
        class="theme-switch"
        inline-prompt
        :active-icon="Moon"
        :inactive-icon="Sunny"
      />
      
      <!-- 全屏按钮 -->
      <el-button
        v-if="showFullscreenButton"
        type="text"
        @click="toggleFullscreen"
        class="fullscreen-btn"
      >
        <el-icon size="18">
          <FullScreen v-if="!isFullscreen" />
          <Aim v-else />
        </el-icon>
      </el-button>
      
      <!-- 用户菜单 -->
      <el-dropdown v-if="showUserMenu" class="user-dropdown">
        <div class="user-info">
          <el-avatar :size="32" :src="userAvatar">
            <el-icon><User /></el-icon>
          </el-avatar>
          <span class="username">{{ username }}</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="goToSettings" v-if="isAdmin">
              <el-icon><Setting /></el-icon>
              系统设置
            </el-dropdown-item>
            <el-dropdown-item divided @click="handleLogout">
              <el-icon><SwitchButton /></el-icon>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/user'
import {
  Moon,
  Sunny,
  FullScreen,
  Aim,
  User,
  Setting,
  SwitchButton
} from '@element-plus/icons-vue'

const props = defineProps({
  title: {
    type: String,
    default: '页面标题'
  },
  subtitle: {
    type: String,
    default: ''
  },
  showBreadcrumb: {
    type: Boolean,
    default: true
  },
  breadcrumbItems: {
    type: Array,
    default: () => []
  },
  showThemeSwitch: {
    type: Boolean,
    default: true
  },
  showFullscreenButton: {
    type: Boolean,
    default: true
  },
  showUserMenu: {
    type: Boolean,
    default: true
  }
})

const router = useRouter()
const userStore = useUserStore()

// 响应式数据
const isDark = ref(localStorage.getItem('theme') === 'dark')
const isFullscreen = ref(false)
const userAvatar = ref('')

// 计算属性
const username = computed(() => userStore.username || '用户')
const isAdmin = computed(() => userStore.isAdmin)

// 方法
const toggleTheme = () => {
  const html = document.documentElement
  if (isDark.value) {
    html.classList.add('dark')
    localStorage.setItem('theme', 'dark')
  } else {
    html.classList.remove('dark')
    localStorage.setItem('theme', 'light')
  }
}

const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

const goToSettings = () => {
  router.push('/settings')
}

const handleLogout = () => {
  ElMessageBox.confirm('确认退出登录吗?', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await userStore.logoutAction()
    window.location.href = '/login'
  }).catch(() => {
    // 取消操作
  })
}

// 监听全屏状态变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

// 生命周期
onMounted(() => {
  // 监听全屏事件
  document.addEventListener('fullscreenchange', handleFullscreenChange)
})

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
})
</script>

<style lang="scss" scoped>
.global-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  
  .header-left {
    .page-title {
      h1 {
        font-size: 24px;
        font-weight: 600;
        color: var(--el-text-color-primary);
        margin: 0 0 4px 0;
      }
      
      p {
        font-size: 14px;
        color: var(--el-text-color-secondary);
        margin: 0;
      }
    }
    
    .breadcrumb {
      margin-top: 8px;
      font-size: 14px;
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    gap: 16px;
    
    .theme-switch {
      --el-switch-on-color: var(--el-color-primary);
    }
    
    .fullscreen-btn {
      color: var(--el-text-color-regular);
      
      &:hover {
        color: var(--el-color-primary);
      }
    }
    
    .user-dropdown {
      .user-info {
        display: flex;
        align-items: center;
        cursor: pointer;
        
        .username {
          margin-left: 8px;
          font-size: 14px;
          color: var(--el-text-color-primary);
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .global-header {
    flex-direction: column;
    align-items: flex-start;
    
    .header-right {
      margin-top: 16px;
      align-self: flex-end;
    }
  }
}
</style> 